<template>
	<div class="container">
		<el-table :data="vDictTableData" border class="table" header-cell-class-name="table-header" @row-click="func_trClick">
			<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
			<el-table-column prop="classifyName" label="分类名称"></el-table-column>
			<el-table-column prop="strClassifyColumn" label="属性类目" v-if="query.classifyGrade===0"></el-table-column>
			<el-table-column prop="remark" label="备注"></el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
				:page-size="query.pageSize" :total="dataTotal" @current-change="handlePageChange"></el-pagination>
		</div>
        <el-footer>
            <el-button @click="func_closeDialog" plain>取 消</el-button>
        </el-footer>
	</div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findClassifyListPage } from "../../../api/hairmanager/productClassify";

export default {
    name: "classifyListPlug",
	props:{
		selectValue: Object
	},
	emits: ["dictData"],
    setup(props, cex) {
		onMounted(()=>{
		
		});
        const query = reactive({
            dicCode: "",
            parentId: 0,
			classifyGrade: 0,
			pageNum: 1,
            pageSize: 10,
        });
        const vDictTableData = ref([]);
        const dataTotal = ref(0);
        // 获取表格数据
        const func_getDictData = () => {
            findClassifyListPage(query).then((res) => {
                vDictTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
        };
        // 查询操作
        const handleSearch = () => {
            query.pageNum = 1;
            func_getDictData();
        };
        // 分页导航
        const handlePageChange = (val) => {
            query.pageNum = val;
            func_getDictData();
        };
		const func_trClick = (row, event, column) => {
			cex.emit('dictData',  {classifyGrade: query['classifyGrade'], dicCode:row['id'], dicName:row['classifyName']});
		};
		const initParams = () => {
			dataTotal.value = 0;
			func_getDictData();
		};
        const func_closeDialog = () => {
            cex.emit('dictData',  {classifyGrade: 99, dicCode:0, dicName:''});
        }
        watch(() => props.selectValue, (val) => {
			query['classifyGrade'] = props.selectValue['classifyGrade'];
			query['parentId'] = props.selectValue['parentId'];
            func_getDictData();
        }, {deep: true,immediate: true});
        return {
			// 系统变量
            query, vDictTableData, dataTotal,
			// 主调用方法
            handleSearch, handlePageChange, func_getDictData, func_trClick, func_closeDialog, 
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
